<template>
  <div>
    <div style="display: flex;justify-content:flex-end">
      <el-form :inline="true" :model="formData" size="mini">
        <el-form-item>
          <el-button size="mini" type="danger" @click="handleBatchDel()">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-container">
      <el-table
        class="table-container"
        border
        height=700
        :data="tableData"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <template v-for="(item,index) in columns">
          <el-table-column :label="item.label" :key="index">
            <template #default="scope">
              <span>{{ scope.row[item.props] }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size=pagination.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { batchDelUsers, delUsers, getUsersList } from '@/api/user'
import * as dayjs from 'dayjs'

export default {
  name: 'ListView',
  data () {
    return {
      formData: {},
      columns: [
        {
          props: 'account',
          label: '账号名'
        },
        {
          props: 'userGroup',
          label: '用户组'
        },
        {
          props: 'ctime',
          label: '创建时间'
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: -1
      },
      tableData: [],
      multipleSelection: []

    }
  },
  computed: {},
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      const params = {
        currentPage: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      }
      getUsersList(params)
        .then(res => {
          const {
            data,
            total
          } = res
          this.pagination.total = total
          this.tableData = data.map(item => {
            item.ctime = dayjs(item.ctime).format('YYYY-MM-DD')
            return {
              ...item
            }
          })
        })
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getData()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.getData()
    },
    handleEdit () {
    },
    handleDelete (index, data) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        const params = {
          id: data.id
        }
        const res = await delUsers(params)
        const {
          code,
          msg
        } = res
        if (code !== 0) {
          return this.$message.error(msg)
        }
        this.$message.success(msg)
        this.getData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleBatchDel () {
      this.$confirm('此操作将批量删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async () => {
        const idArr = this.multipleSelection.map(item => {
          return item.id
        })
        const params = {
          ids: JSON.stringify(idArr)
        }
        const res = await batchDelUsers(params)
        const {
          code,
          msg
        } = res
        if (code !== 0) {
          return this.$message.error(msg)
        }
        this.$message.success(msg)
        this.getData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
.main-container {
}

.table-container {
}

.pagination {
  display: flex;
  margin-top: 15px;
  flex-direction: row-reverse;
}
</style>
